<template>
    <div class="root">
        <slot name="listBefore"></slot>

        <list ref="list" class="g-list" loadmoreoffset="15"
              @loadmore="fetchMore" @scroll="onScroll" offset-accuracy="30">

            <cell>
                <slot name="listInHead"></slot>
            </cell>

            <cell class="g-list-cell" append="tree" :ref="'cell_0'">
                <div class="goods-item" v-for="(g, index) in goodsList" :key="g.id">
                    <goods-item :goods="g" :hasLabel="hasLabel" :ref="'ref'+ g.id"></goods-item>
                </div>
            </cell>

            <!--加载提示-->
            <loading-more-tip v-if="!listCompleted && goodsList.length" :loading="loading"></loading-more-tip>

            <cell v-if="listCompleted && goodsList.length">
                <loaded-over-tip></loaded-over-tip>
            </cell>

            <cell class="empty-cell" v-if="listLoaded && !goodsList.length">
                <content-empty :emptyTxt="'暂无该类商品 ~'"></content-empty>
            </cell>
        </list>

        <!--一键置顶-->
        <go-top :isFixedNode="true" :showGoTop="showGoTop" :refEl="refEl"></go-top>
    </div>
</template>

<style scoped>
.root{
    flex: 1;
    background-color: transparent;
}
.g-list-cell{
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin-right: -10px;
}
.goods-item {
    margin-right: 10px;
    margin-bottom: 10px;
}
.empty-cell {
    flex: 1;
}
</style>

<script>
    import goodsItem from 'components/goods-item/goods-item.vue';
    import contentEmpty from 'components/content-empty/content-empty.vue';
    import loadingMoreTip from 'components/loading-more-tip/loading-more-tip.vue';
    import goTop from 'components/go-top/go-top.vue';
    import loadedOverTip from 'components/loaded-over-tip/loaded-over-tip.vue';
    import cartService from 'services/cartService';

    export default{
        props: {
            goodsList: {
                type: Array,
                required: true
            },
            hasLabel: {
                type: Boolean,
                default: false
            },
            listLoaded:{
                type: Boolean,
                default: false,
                required: true
            },
            listCompleted: {
                type: Boolean,
                default: false,
                required: true
            },
            loading: {
                required: true,
                type: Boolean
            }
        },
        data(){
            return{
                showGoTop: false,
                refEl: 'cell_0'
            }
        },
        created(){
            //同步购物车商品数量
            cartService.resumeCartGoods(this);
        },
        components:{
            'goods-item': goodsItem,
            'content-empty': contentEmpty,
            'loading-more-tip': loadingMoreTip,
            'go-top': goTop,
            'loaded-over-tip': loadedOverTip
        },
        methods: {
            /**获取更多数据*/
            fetchMore(e) {
                this.$refs['list'].resetLoadmore(); //下一次滚动时强制触发loadmore
                this.$emit('fetchMore', e);
            },
            /**滚动监听事件*/
            onScroll(e) {
                let contentOffset = e.contentOffset;
                let offsetY = contentOffset.y;
                if(offsetY <= -4000){
                    if(!this.showGoTop) this.showGoTop = true;
                } else if(offsetY > -4000) {
                    if(this.showGoTop) this.showGoTop = false;
                }
            }
        },
        destroyed(){
            cartService.removeResumeCartGoodsListener();
        }
    }
</script>
